<%--
  Created by IntelliJ IDEA.
  User: 97990
  Date: 2022/7/20
  Time: 13:38
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <jsp:include page="/common/head.jsp"></jsp:include>
    <title>分类页</title>
</head>
<body>
<jsp:include page="/common/nav.jsp"></jsp:include>
<div class="container">
    <div class="row">
        <div class="col-sm-12">
            <div class="panel panel-info">
                <div class="panel-heading">全部分类</div>

                <div class="panel-body" id="tabaleDiv">
                    <table id="myTable" class="table table-striped table-bordered">
                        <thead>
                            <th>分类</th>
                            <th>操作</th>
                        </thead>
                        <tbody>

                        </tbody>
                    </table>
                </div>

            </div>
        </div>
    </div>
</div>
<%--新增弹框--%>
<div id="addDiv" style="display: none">
    <form class="form-horizontal">

        <div class="form-group">
            <label class="col-sm-3 control-label">父级分类:</label>
            <div class="col-sm-8">
                <select class="form-control" id="add_selectDiv">
                    <option value="-1">请选择</option>
                </select>
            </div>
        </div>

        <div class="form-group">
            <label class="col-sm-3 control-label">分类名称:</label>
            <div class="col-sm-8">
                <input type="text" id="add_cateName" class="form-control"  placeholder="请输入分类名称">
            </div>
        </div>

    </form>
</div>

<%--修改弹框--%>
<div id="editDiv" style="display: none">
    <form class="form-horizontal">

        <div class="form-group">
            <label class="col-sm-3 control-label">父级分类:</label>
            <div class="col-sm-8">
                <select class="form-control" id="edit_selectDiv">
                    <option value="-1">请选择</option>
                </select>
            </div>
        </div>

        <div class="form-group">
            <label class="col-sm-3 control-label">分类名称:</label>
            <div class="col-sm-8">
                <input type="text" id="edit_cateName" class="form-control"  placeholder="请输入分类名称">
            </div>
        </div>

    </form>
</div>


<jsp:include page="/common/script.jsp"></jsp:include>
<script>
    var v_tbaleHTML;
    $(function (){
        //初始化列表展示
        initTree();
        //备份列表
        v_tbaleHTML = $("#tabaleDiv").html();
    })

    //修改
    var editAlert;
    function editCate(id){
        //备份
        var v_editDiv = $("#editDiv").html();

        //动态追加option
        selectDiv("edit_selectDiv");

        //弹框
        $.ajax({
            type:"post",
            url:"/cate/findCate.do",
            data:{"id":id},
            success:function (res){
                if (res.code == 200){
                    var v_cate = res.data;
                    $("#edit_cateName").val(v_cate.cateName);
                    //回填下拉框
                    $("#edit_selectDiv").val(v_cate.fatherId);
                    editAlert = bootbox.dialog({
                        title:"<b>修改分类</b>",
                        message:$("#editDiv form"),//另一种方式.children()
                        size:"normal",
                        buttons: {
                            confirm: {
                                label: '<span class="glyphicon glyphicon-ok"></span>确定',
                                className: 'btn-info',
                                callback:function (result){
                                    var v_param = {};
                                    v_param.id = id;
                                    v_param.cateName = $("#edit_cateName",editAlert).val();
                                        v_param.fatherId = $("#edit_selectDiv",editAlert).val()?$("#edit_selectDiv",editAlert).val():0;
                                    $.ajax({
                                        type:"post",
                                        url:"/cate/updateCate.do",
                                        data:v_param,
                                        success:function (res){
                                            if (res.code == 200){
                                                initTree();
                                            }
                                        }
                                    })
                                },
                            },
                            cancel: {
                                label: '<span class="glyphicon glyphicon-remove"></span>取消',
                                className: 'btn-danger'
                            }
                        },

                    })

                    //还原
                    $("#editDiv").html(v_editDiv);
                }
            }
        })
    }

    // 动态追加option
    function selectDiv(id){
        for(let cate of v_sortCateList){
            var v_level = cate.level
            var str = "";
            for (let i = 0; i < v_level*3; i++) {
                str += "&nbsp;"
            }
            $("#"+id).append('<option value="'+cate.id+'">'+str+cate.cateName+'</option>')
        }
    }

    //删除
    function delCate(id){
        //声明一个空数组用来放所有的id
        var idArr = [];
        //调用方法获取到所有子节点的id
        getCateSon(id,idArr);
        //放入自己的id
        idArr.push(id);

        // 证明用户选择了，所以要提醒是否要删除
        bootbox.confirm({
            titile:"提示信息",
            message:"您确定删除吗?",
            buttons: {
                confirm: {
                    label: '<span class="glyphicon glyphicon-ok"></span>确定',
                    className: 'btn-success'
                },
                cancel: {
                    label: '<span class="glyphicon glyphicon-remove"></span>取消',
                    className: 'btn-danger'
                }
            },
            callback:function (result){
                if (result){
                    $.post({
                        type:"post",
                        url:"/cate/deleteCate.do",
                        data:{"ids":idArr.join(",")},//join方法将js数组转换为指定符号分割的字符串
                        success:function (result){
                            if (result.code == 200){
                                // 刷新
                                initTree();
                            }
                        }
                    })
                }
            }
        })
    }

    //获取选中节点的子节点id
    function getCateSon(id,idArr){
        //调用查询子id方法找到所有子节点
        var sonList = getSon(v_cateList,id);
        for (let son of sonList){
            //将所有子节点的id放入集合中
            idArr.push(son.id);
            //拿遍历出来的分类的id去继续查找该分类的子节点
            getCateSon(son.id,idArr);
        }
    }

    //增加
    var addAlert;
    function addCate(id){

        //备份弹框
        var v_html = $("#addDiv").html();

        // 动态追加option
        selectDiv("add_selectDiv");
        //回填下拉框
        $("#add_selectDiv").val(id);

        //弹框
        addAlert = bootbox.dialog({
            title:"<b>新增分类</b>",
            message:$("#addDiv form"),//另一种方式.children()
            size:"normal",
            buttons: {
                confirm: {
                    label: '<span class="glyphicon glyphicon-ok"></span>确定',
                    className: 'btn-info',
                    callback:function (result){
                        var v_param = {};
                        v_param.cateName = $("#add_cateName", addAlert).val();
                        v_param.fatherId = $("#add_selectDiv",addAlert).val();
                        $.ajax({
                            type:"post",
                            url:"/cate/add.do",
                            data:v_param,
                            success:function (res){
                                if (res.code == 200){
                                    initTree();
                                }
                            }
                        })
                    },
                },
                cancel: {
                    label: '<span class="glyphicon glyphicon-remove"></span>取消',
                    className: 'btn-danger',
                }
            },
        })
        //还原弹框
        $("#addDiv").html(v_html);
    }

    //列表展示
    var v_cateList;
    var v_sortCateList;
    function initTree(){
        //还原列表
        $("#tabaleDiv").html(v_tbaleHTML);
        $.ajax({
            type:"get",
            url:"/cate/list.do",
            success:function (res){
                if (res.code == 200){
                    v_cateList = res.data;
                    //存放排序后的数据
                    v_sortCateList = [];
                    sortCate(v_cateList,v_sortCateList,0,1)
                    var v_html = "";
                    for (let v_cate of v_sortCateList){
                        v_html += '<tr data-tt-id="'+v_cate.id+'" data-tt-parent-id="'+v_cate.fatherId+'">' +
                            '<td>'+v_cate.cateName+'</td>' +
                            '<td>' +
                            '<div class="btn-group">'+
                            '<button type="button" class="btn btn-primary btn-sm" onclick="addCate(\''+v_cate.id+'\')"><i class="glyphicon glyphicon-plus"></i> 增加</button>'+
                            '<button type="button" class="btn btn-warning btn-sm" onclick="editCate(\''+v_cate.id+'\')"><i class="glyphicon glyphicon-pencil"></i> 编辑</button>'+
                            '<button type="button" class="btn btn-danger btn-sm" onclick="delCate(\''+v_cate.id+'\')"><i class="glyphicon glyphicon-trash"></i> 删除</button>'+
                            '</div>'+
                            '</td>' +
                            '</tr>'
                    }
                    //填充内容
                    $("#myTable tbody").html(v_html);
                    // 初始化treeTable
                    $("#myTable").treetable({expandable: true,initialState:'expanded'})
                }
            }
        })
    }

    //重新给cate排序
    function sortCate(v_cateList,v_sortCateList,id,level){
        //调用查询子节点的方法找到所有子节点
        var sonList = getSon(v_cateList,id);
        // 如果长度大于0，说明还有子节点
        if (sonList.length > 0){
            for (let son of sonList){
                son.level = level;
                //将遍历出的子节点放入空数组中
                v_sortCateList.push(son);
                //调用自己，继续查询自己的子节点并放入空数组中
                sortCate(v_cateList,v_sortCateList,son.id,level+1);
            }
        }
    }

    //找到id对应的fatherId 也就是找他的子级
    function getSon(v_cateList,id){
        //声明一个空数组 用来存放查询到的子节点
        var v_cateSon = [];
        for (let v_cate of v_cateList){
            //遍历所有数据，找到跟id对应的fatherId
            if (id == v_cate.fatherId){
                //说明是子节点 放入数组中
                v_cateSon.push(v_cate);
            }
        }
        //将找到的数据传出去
        return v_cateSon;
    }


</script>
</body>
</html>
